<!-- 首页 -->
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useOffSetTopStore } from '@/stores/modules/offsetTop'

// 仓库
const offsetTopStore = useOffSetTopStore()

let n = ref(0)
window.addEventListener('scroll', () => {
  n.value = document.documentElement.scrollTop
})

onMounted(() => {})
</script>

<template>
  <div class="navigationBarLayout">
    <el-affix
      style="width: 100%; position: fixed; z-index: 10"
      :style="{
        backgroundColor: n >= 80 ? 'rgba(255, 0, 0, 1)' : 'rgba(255, 0, 0, 0)'
      }"
      :offset="0"
    >
      <el-header
        :style="{ color: n > 80 ? '#fff' : '' }"
        class="header wrapper"
      >
        <div class="left">星朔</div>
        <div class="right">
          <ul>
            <li @click="offsetTopStore.goHome()">首页</li>
            <li>关于我们</li>
            <li>新闻资讯</li>
            <li
              @click="offsetTopStore.goKnowledgeBase(offsetTopStore.KoffsetTop)"
            >
              知识库
            </li>
            <li>联系我们</li>
          </ul>
        </div>
      </el-header>
    </el-affix>
  </div>
</template>

<style lang="scss" scoped>
.el-header {
  height: 75px;
  display: flex;
  justify-content: space-between;
  .left {
    font: 700 42px/75px '楷体';
  }
  .right {
    font: 18px/75px '';
    ul {
      display: flex;
      li {
        cursor: pointer;
        margin-left: 30px;
      }
    }
  }
}
</style>
